/**
 * tooltip组件使用指令
 * @module components/tooltips/index
 * @author 黄吉平
 */

import bus from '../../utils/bus'

export default (Vue, options = {}) => {
  // 获取绑定元素的 position
  const getPosition = function (el) {
    return {
      left: el.getBoundingClientRect().left,
      right: el.getBoundingClientRect().right,
      top: el.getBoundingClientRect().top,
      width: el.getBoundingClientRect().width,
      height: el.getBoundingClientRect().height
    }
  }

  // 绑定节点初始化： 节点设置自定义属性‘opentooltips’
  const bindHandle = function (el, binding, vnode) {
    if (!binding.value) return
    el.setAttribute('opentooltips', true)
  }

  // 绑定节点insert进父节点时进行数据绑定与事件监听
  const setData = function (el, binding, vnode) {
    if (!binding.value) return
    el.style.color = '#5077aa'
    let bindNodeData = {}   // 绑定的节点数据payload生成
    bindNodeData.inner = el.innerText || el.textContent
    bindNodeData.params = binding.value

    el.addEventListener('click', () => { // 点击节点后通过eventBus向toolTips组件发送payload
      bindNodeData.pos = getPosition(el)
      bus.$emit('tooltipsDataTrans', bindNodeData)
    })
  }
  Vue.directive('init-tooltips', {
    bind: bindHandle,
    inserted: setData // 插入 后 执行addListener
  })
}

/**
 * @example
 * // 基础用法
 * main.js 中引入并全局注册directive
 * 引入： import toolTips from '../..ptah to tooltips../index.js'  注册：Vue.use(toolTips)
 * App.vue 中引入并使用 tooltips组件
 * 引入： import toolTips from '..ptah to tooltips../ToolTips.vue' 使用：<tool-tips></tool-tips>
 *
 * 在任意组件开发中使用：
 * 在所需标签中使用'v-init-tooltips=arr' 自定义指令
 * 如：<span v-init-tooltips='featureList'>135606046064</span>
 * 或：<span v-init-tooltips="boolean?list:''">135606046064</span> 传空值不会唤起tooltips
 * 注：featureList 必须为：[{text:'功能1', fn: fnName1(方法名)}, {text:'功能2', fn: fnName2}, ......]
 *     数组中 的 fn 默认参数 inner, 为 绑定标签的 innerHTML
 */
